﻿@import '../../../Geral/_mixins.scss';
@import '../../../Geral/_styles.scss';
@import '../../../Geral/_variaveis.scss';

#sectionHome {
	@include float(2000px, 100%, 0, 0, true);

	#sectionSlider {
		@include float(700px, 100%);
		background: $vermelho;
	}

	#sectionProdutosHome {
		@include float(700px, 96%, 0, 0, true);
		padding: 0 2%;

		#sectionCategorias {
			@include float(4120px, 20%, 0, 0, true);
			/*background: #eee;*/

			ul {
				@include marginpadding();
				list-style: none;

				li {
					display: block;
					margin: 10px 0;
					padding: 10px;
				}
			}
		}

		#sectionCentral {
			@include float(4120px, 56%, 0, 0, true);
			padding: 0 2%;

			#sectionProdutosMaisVendidos {
				@include float(auto, 100%);

				.articleMaisVendido {
					@include float(auto, 300px, 40px, 35px);
					border-bottom: 2px solid $vermelho;
					text-align: center;

					.divImagemProduto {
						@include float(350px, 100%);
						overflow: hidden;

						img {
							height: 350px;
							max-width: 300px;
						}

						.divDesconto {
							position: relative;
							top: -372px;
							left: -50px;
							height: 350px;
							width: 200px;
							background: url('../../Imagens/Icones/desconto.png') no-repeat left;
							background-size: contain;

							.valorDesconto {
								width: 140px;
								padding: 10px 0;
								padding-right: 10px;
								color: pink;
								font-weight: bold;
								text-align: right;
								background: $vermelho;
							}
						}
					}

					.divNomeProduto {
						@include float(150px, 100%);
						font-size: 30px;
						overflow: hidden;
					}

					.divPrecoProduto {
						@include float(50px, 98%);
						padding: 1%;
						background: $vermelho;
						color: $branco;
					}

					&:hover {
						-moz-box-sizing: border-box;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						border-bottom: 2px solid darken($vermelho, 20%);
						cursor: pointer;

						& > .divPrecoProduto {
							font-weight: normal;
						}
					}
				}
			}

			#sectionNovidades {
				@include float(auto, 100%, 100px);

				.articleMaisVendido {
					@include float(auto, 300px, 40px, 35px);
					border-bottom: 2px solid $vermelho;
					text-align: center;

					.divImagemProduto {
						@include float(350px, 100%);
						overflow: hidden;

						img {
							height: 350px;
							max-width: 300px;
						}

						.divDesconto {
							position: relative;
							top: -372px;
							left: -50px;
							height: 350px;
							width: 200px;
							background: url('../../Imagens/Icones/desconto.png') no-repeat left;
							background-size: contain;

							.valorDesconto {
								width: 140px;
								padding: 10px 0;
								padding-right: 10px;
								color: pink;
								font-weight: bold;
								text-align: right;
								background: $vermelho;
							}
						}
					}

					.divNomeProduto {
						@include float(150px, 100%);
						font-size: 30px;
						overflow: hidden;
					}

					.divPrecoProduto {
						@include float(50px, 98%);
						padding: 1%;
						background: $vermelho;
						color: $branco;
					}

					&:hover {
						-moz-box-sizing: border-box;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						border-bottom: 2px solid darken($vermelho, 20%);
						cursor: pointer;

						& > .divPrecoProduto {
							font-weight: normal;
						}
					}
				}
			}
		}

		#sectionPromocoes {
			@include float(4120px, 20%, 0, 0, true);
			/*background: #eee;*/

			.articleMaisVendido {
				@include float(auto, 300px, 40px, calc(50% - 150px));
				border-bottom: 2px solid $vermelho;
				text-align: center;

				.divImagemProduto {
					@include float(350px, 100%);
					overflow: hidden;

					img {
						height: 350px;
						max-width: 300px;
					}

					.divDesconto {
						position: relative;
						top: -372px;
						left: -50px;
						height: 350px;
						width: 200px;
						background: url('../../Imagens/Icones/desconto.png') no-repeat left;
						background-size: contain;

						.valorDesconto {
							width: 140px;
							padding: 10px 0;
							padding-right: 10px;
							color: pink;
							font-weight: bold;
							text-align: right;
							background: $vermelho;
						}
					}
				}

				.divNomeProduto {
					@include float(150px, 100%);
					font-size: 30px;
					overflow: hidden;
				}

				.divPrecoProduto {
					@include float(50px, 98%);
					padding: 1%;
					background: $vermelho;
					color: $branco;
				}

				&:hover {
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					border-bottom: 2px solid darken($vermelho, 20%);
					cursor: pointer;

					& > .divPrecoProduto {
						font-weight: normal;
					}
				}
			}
		}
	}
}
